<template>

  <div @click="handleClick(item)" @dblclick="handleDblClick(item)" class="item" :class="{ edit: isEdit }">
    <div v-if="isEdit" class="edit-wrapper">
      <input ref="input" :value="item.name" @blur="handleBlur(item)" @keyup.enter="handleBlur(item)"
        class="edit-input" />
      <div v-if="item.error" class="error-tip">{{ item.error }}</div>
    </div>
    <span v-else class="name-text">{{ item.name }}</span>
  </div>
</template>

<script>
export default {
  name: 'listItem',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    currentItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // isEdit: false
      clickTimer: null
    }
  },
  computed: {
    isEdit() {
      let temp = false
      if (this.currentItem.name && this.currentItem.name === this.item.name) {
        temp = true
      }else {
        temp = false
      }
      return temp
    }
  },
  methods: {
    // 处理单击事件（带防冲突）
    handleClick(item) {
      clearTimeout(this.clickTimer)
      this.clickTimer = setTimeout(() => {
        this.executeClick(item)
      }, 300)
    },
    // 实际执行单击操作
    executeClick(item) {
      if (this.isEdit) return
      console.log('Clicked:', item.name)
      this.$emit('changeCurrent', {
        name: '',
        id: 0
      })
    },
    // 处理双击事件
    handleDblClick(item) {
      clearTimeout(this.clickTimer) // 清除单击定时器
      this.enterEdit(item)
    },
    enterEdit(currentItem) {
      // this.items.forEach(item => {
      //   // 关闭所有其他项的编辑状态
      //   item.isEditing = item.id === currentItem.id
      //   item.error = '' // 清除旧错误信息
      // })
      console.log("currentItem", this.currentItem)
      if (this.currentItem.name === currentItem.name) {
        // this.isEdit = false
        console.log("===", this.currentItem)
        return false
      }else {
        console.log("!==")
        // this.isEdit = true
        this.$emit('changeCurrent', currentItem)
      }
      

      this.$nextTick(() => {
        // 自动聚焦到输入框
        // const inputRef = this.$refs.input?.find(
        //   // ref => ref.$el?.dataset?.index === currentItem.id.toString()
        //   ref => {
        //     console.log('ref.$el?.dataset', ref.$el?.dataset)
        //   }
        // )
        // console.log('inputRef', this.$refs.input)
        this.$refs.input.focus()
        // if (inputRef) {
        //   inputRef.focus()
        // }
      })
    },

    validate(item) {
      if (!item.name) {
        return 'Name cannot be empty'
      }
      if (item.name.length > 10) {
        return 'Name cannot exceed 10 characters'
      }
      return ''
    },

    handleBlur(item) {
      const error = this.validate(item)
      if (error) {
        item.error = error
        // 保持编辑状态直到输入合法
        return
      }
      item.isEditing = false
      item.error = ''
    }
  }
}
</script>

<style lang="scss" scoped>


.item{
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  transition: all 0.3s;
  cursor: pointer;
  &.edit{
    border-color: #409eff;
  }
  .edit-input {
    padding: 6px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
  }
}


.name-text {
  cursor: text;
}

.edit-wrapper {
  position: relative;
}



.error-tip {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 4px;
}
</style>